<template>
	<view>
		<navbar :title="$t('my.edittitle')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		 </navbar>
		 <u-cell-group>
		 	<u-cell-item  title="Account" :arrow="false" :value="userInfo.mobile"></u-cell-item>
		 	<u-cell-item  title="Head portrait"  @click="show=true">
				<u-image slot="right-icon" width="70rpx" height="70rpx" shape="circle" :src="userInfo.avatar">
					<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="70rpx" height="70rpx" />
				</u-image>
				
			</u-cell-item>
			<u-cell-item  title="Nickname" :value="userInfo.nickname" @click="show1=true"></u-cell-item>
		 </u-cell-group>
		 <u-popup v-model="show" mode="bottom" >
		 		<view class="white" @click="changeHead('album')">
		 			{{$t('my.album')}}
		 		</view>
				<view class="white" @click="changeHead('camera')">
					{{$t('my.uploadphoto')}}
				</view>
				<view class="cancel" @click="show = false">
					{{$t('common.cancel')}}
				</view>
		 </u-popup>
		 <u-popup v-model="show1" mode="center" :closeable="true"
		  close-icon-color="#C17C1CFF" close-icon-size="28rpx">
		 		<view class="white1">
		 			<view class="name">
		 				{{$t('my.modify')}}
		 			</view>
					<u-input v-model="value" type="text" :clearable="false"
					 :maxlength="15" placeholder="Please enter a nickname of up to 16 words"
					 inputAlign="center" :custom-style="{background: '#ECECEC',
					 height:'90rpx',borderRadius: '10rpx',marginTop:'50rpx',
					 marginLeft:'30rpx',marginRight:'30rpx'}"/>
		 		</view>
				<view class="yellow" @click="onEditClick">
					{{$t('common.confirm')}}
				</view>
		 </u-popup>
	</view>
</template>

<script>
    import {
		profile,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				show: false,
				show1:false,
				value:'',
				
				
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo || {}
			}
		},
		methods: {
			async onEditClick() {
				uni.showLoading({
				});
				let result = await profile({
					nickname: this.value
				})
				this.show1 = false;
				this.$store.dispatch('getUserInfo');
				uni.hideLoading();
			},
			changeHead (val) {
				let that = this;
				uni.chooseImage({
					sourceType: [val],
				    success: res => {
				        const tempFilePaths = res.tempFilePaths //拿到选择的图片，是一个数组
						uni.showLoading({
							mask: true,
							title: this.$t('common.loading')
						})
						uni.uploadFile({
							url: this.$apiAddr + '/api/uploads/updateavatar',	//post请求的地址
							name: 'file',
							header: {
								token: this.$store.state.token	
							},
							filePath:tempFilePaths[0],
							success: (uploadFileRes) => {
								uni.hideLoading()
								that.$store.dispatch('getUserInfo');
								this.show = false;
								// AccountEdit({headimg: img}).then(ares => {
								// 	uni.hideLoading()
								// 	uni.showToast({
								// 		icon: 'none',
								// 		title: this.$t('account.editS')
								// 	})
								// 	this.userData()
								// }).catch(() => {
								// 	uni.showToast({
								// 		icon: 'none',
								// 		title: this.$t('account.editF')
								// 	})
								// 	uni.hideLoading()
								// })
							},
							fail: () => {
								uni.hideLoading()
							}
						})
				    },
					fail: () => {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: this.$t('common.err')
						// })
						uni.hideLoading()
					},
					complete: () => {
						console.log(123132);
					}
				});
			},
		}
	}
</script>

<style lang="scss"scoped>
	/deep/ .u-border-bottom  {
	font-size: 32px;
	font-family: Rubik;
	font-weight: 400;
	color: #AAAAAA !important;
	}
	
	/deep/ .u-cell__value{
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E !important;
	}
	
	.white{
		margin: 30rpx 40rpx 0;
		width: 670rpx;
		height: 90rpx;
		background: #FFFFFFFF;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #65676BFF;
		text-align: center;
		line-height: 90rpx;
	}
	
	.cancel{
		margin-top: 40rpx;
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		text-align: center;
		line-height: 110rpx;
	}
	
	/deep/ .u-drawer-bottom{
		background-color: rgba(0,0,0,0);
	}
	/deep/ .u-mode-center-box{
		background-color: rgba(0,0,0,0);
	}
	
	.white1{
		width: 660rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		line-height:264rpx;
		overflow: hidden;
		.name{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 34rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}
	
	.yellow{
		width: 660rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		margin-top: 60rpx;
	}
	#demoCanvas {
		width: 100vw;
		height: 200rpx;
	}
</style>
